<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 分类数据
      const categoryList = [
        { id: 1, name: '头条' },
        { id: 2, name: '科技' },
        { id: 3, name: '娱乐' },
      ]

      // 项目存在的问题：只有一个 postList，切换栏目的时候，postList 以前的数据就没有了。
      //   const postList = []
      // 解决方案：
      //   map 数组映射，基于某个数组映射出新的数组
      const categoryList2 = categoryList.map((item) => {
        // ...展开保留 item 原来的数据，再额外添加一个 postList，用于存放栏目对应的新闻数据
        return { ...item, postList: [] }
      })
      // const categoryList2 = categoryList.map((item) => ({ ...item, postList: [] }))
      categoryList2[0].postList.push('头条的数据')

      // 原来的数组，不会受到影响
      console.log(categoryList)
      // map 处理后的新数组
      console.log(categoryList2)

      // 如果有需要，map 也可以用来简化数据
      const categoryList3 = categoryList.map((item) => {
        return item.name
      })
      console.log(categoryList3) // ["头条", "科技", "娱乐"]
    </script>
  </body>
</html>
